<template>
  <div>
    <div
      class="fenZuZhuangTaiDiv"
      style="display: flex; flex-direction: column; height: calc(100vh - 100px)"
    >
      <Spin size="large" fix v-if="spinJiTaiShow"></Spin>
      <Card class="ivu-mt-8 ivu-mb-8" v-if="false">
        <Row :gutter="24" type="flex">
          <Col v-if="collapse" v-bind="grid" class="ivu-mb-16">
            <RadioGroup v-model="radioButton" type="button" button-style="solid">
              <Radio label="发出的任务(123)" style="width: 50%"></Radio>
              <Radio label="发出的任务(119)" style="width: 50%"></Radio>
            </RadioGroup>
          </Col>
          <Col v-if="collapse" v-bind="grid" class="ivu-mb-16">
            <span>通知方式:</span>
            <Select
              transfer
              style="margin-left: 5px; display: inline-block; width: calc(100% - 70px)"
              v-model="tongZhiState"
              placeholder="请选择状态"
              element-id="tongZhiState"
            >
              <Option :value="0">全部</Option>
              <Option :value="1">在职</Option>
              <Option :value="2">离职</Option>
            </Select>
          </Col>
          <Col v-if="collapse" v-bind="grid2" class="ivu-mb-16">
            <span>时间:</span>
            <DatePicker
              transfer
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              placeholder="开始时间"
              style="width: calc(50% - 40px)"
            ></DatePicker>
            <span>至:</span>
            <DatePicker
              transfer
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              placeholder="结束时间"
              style="width: calc(50% - 40px)"
            ></DatePicker>
          </Col>
          <Col v-if="collapse" v-bind="grid">
            <Input
              v-model="renWusouSuoStr"
              placeholder="搜索任务名称关键字"
              element-id="souSuoStr"
            />
          </Col>
          <Col v-if="collapse" v-bind="grid">
            <Button type="primary" shape="circle" icon="ios-search" class="ivu-mr-16">查询</Button>
            <Button type="primary" shape="circle" icon="ios-paper-plane">发送任务</Button>
          </Col>
          <Col flex="auto"> </Col>
          <Col flex="none">
            <div style="display: flex; flex-direction: row-reverse">
              <a
                @click="collapse = !collapse"
                class="ivu-mr-8 ivu-mt-8"
                style="line-height: 18px"
                v-font="16"
              >
                <template v-if="!collapse">
                  展开
                  <Icon type="ios-arrow-down" />
                </template>
                <template v-else>
                  收起
                  <Icon type="ios-arrow-up" />
                </template>
              </a>
            </div>
          </Col>
        </Row>
      </Card>

      <div class="ivu-mt-8 flex" style="overflow-x: auto; flex-shrink: 0">
        <Col
          flex="1"
          class="ivu-mr-16"
          v-if="['细纱', '粗纱', '预并', '梳棉', '末并'].includes(gongXuStr)"
        >
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="当前产量" status="down">
                <template v-if="gongXuStr === '细纱'" #total>
                  <CountUp :end="zongLanDict.currentShiftLength" :duration="2" />
                  {{ zongLanDict.danWei }}
                </template>
                <template v-else #total>
                  <CountUp :end="zongLanDict.theoreticalYarnWeight" :duration="2" />
                  {{ zongLanDict.danWei }}
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-ic_xian" size="65" />
            </div>
          </Card>
        </Col>
        <Col flex="1" class="ivu-mr-16" v-if="gongXuStr === '细纱'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo :title="'效率最低:' + zongLanDict.machineName + '号机台'" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.efcRunMin" :decimals="2" :duration="2" />
                  %
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-baifenbi" size="65" />
            </div>
          </Card>
        </Col>
        <Col
          flex="1"
          class="ivu-mr-16"
          v-if="['细纱', '粗纱', '预并', '梳棉', '末并'].includes(gongXuStr)"
        >
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="当前能耗" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.power" :duration="2" />
                  kwh
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-speed" size="65" />
            </div>
          </Card>
        </Col>
        <Col flex="1" class="ivu-mr-16" v-if="gongXuStr === '细纱'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="当前效率" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.runEfcAvg" :decimals="2" :duration="2" />
                  %
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-baifenbi" size="65" />
            </div>
          </Card>
        </Col>
        <Col flex="1" class="ivu-mr-16" v-if="gongXuStr === '细纱'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="接头平均用时" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.breakJointTimeAvg" :duration="2" />
                  分钟
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-pingjunyonshi" size="65" />
            </div>
          </Card>
        </Col>
        <Col flex="1" class="ivu-mr-16" v-if="gongXuStr === '细纱'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="千锭时断头" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.breaksPerKilo" :duration="2" />
                  个
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-gongxu" size="65" />
            </div>
          </Card>
        </Col>
        <Col flex="1" v-if="gongXuStr === '细纱'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="落纱留头率" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.doffRate" :decimals="1" :duration="2" />
                  %
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-baifenbi" size="65" />
            </div>
          </Card>
        </Col>

        <Col flex="1" class="ivu-mr-16" v-if="gongXuStr === '粗纱'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="机后断条次数" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.breakCnt" :duration="2" />
                  次
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-leiji" size="65" />
            </div>
          </Card>
        </Col>
        <Col flex="1" v-if="gongXuStr === '粗纱'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="断纱次数" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.breakYarnCnt" :duration="2" />
                  次
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-leiji" size="65" />
            </div>
          </Card>
        </Col>
        <Col
          flex="1"
          class="ivu-mr-16"
          v-if="gongXuStr === '预并' || gongXuStr === '梳棉' || gongXuStr === '末并'"
        >
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="在线台数" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.onLine" :duration="2" />
                  台
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-jitaiguanli" size="65" />
            </div>
          </Card>
        </Col>
        <Col flex="1" v-if="gongXuStr === '预并' || gongXuStr === '梳棉' || gongXuStr === '末并'">
          <Card>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
              <NumberInfo title="离线台数" status="down">
                <template #total>
                  <CountUp :end="zongLanDict.offLine" :duration="2" />
                  台
                </template>
              </NumberInfo>
              <Icon custom="iconfont icon-jitaiguanli" size="65" />
            </div>
          </Card>
        </Col>
      </div>

      <div
        style="width: 100%; margin-top: 10px; height: 48px; position: relative; background: #d9eef8"
      >
        <div style="display: flex; flex-direction: row; justify-content: space-between">
          <div style="height: 60px; vertical-align: middle" v-show="pingZhongShow === true">
            <span
              style="
                display: inline-block;
                margin-left: 16px;
                font-size: 18px;
                line-height: 48px;
                font-weight: 600;
              "
              >效率最低</span
            >
            <input-number
              @on-blur="taiShuInput"
              :max="500"
              :min="1"
              v-model="souSuoStr"
              style="width: 70px; margin-top: -4px"
              placeholder=""
              element-id="souSuoStr"
            />
            <span
              style="
                display: inline-block;
                margin-right: 50px;
                font-size: 18px;
                line-height: 48px;
                font-weight: 600;
              "
              >台车</span
            >
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-content: center;
              height: 50px;
              width: calc(100% - 170px);
              padding-top: 10px;
            "
            v-show="pingZhongShow === false"
          >
            <span
              style="
                display: inline-block;
                margin-left: 10px;
                width: 50px;
                font-size: 18px;
                font-weight: 600;
              "
              >品种:</span
            >
            <RadioGroup v-model="pingZhongID" @on-change="radioGroupClck">
              <Radio label="全部" style="margin-top: 5px"></Radio>
              <Radio
                :label="item.materialName"
                v-for="(item, index) in zaiFangList"
                :key="index"
                style="margin-top: 5px"
              >
                {{ item.materialName }}
              </Radio>
            </RadioGroup>
          </div>
          <div style="margin-right: 20px; height: 60px">
            <span
              style="
                display: inline-block;
                margin-right: 70px;
                margin-top: 10px;
                font-size: 18px;
                font-weight: 600;
              "
              >品种</span
            >
            <div style="display: inline-block; position: absolute; top: 12px; right: 70px">
              <Switch v-model="pingZhongShow" false-color="#13ce66"> </Switch>
            </div>
            <span style="display: inline-block; margin-top: 10px; font-size: 18px; font-weight: 600"
              >效率</span
            >
          </div>
        </div>
      </div>
      <Card :padding="0" :bordered="false" style="flex: auto; overflow-y: auto; overflow-x: hidden">
        <div>
          <Row>
            <Col v-bind="grid3" v-for="(item, index) in jiTailist" :key="index">
              <div style="padding: 0px 5px 0px 5px" class="jiTaiDiv">
                <Card :padding="0" style="margin-top: 12px">
                  <div @click="cardClick(item)" style="padding-bottom: 15px">
                    <div
                      style="
                        display: flex;
                        flex-direction: row-reverse;
                        width: 100%;
                        height: 30px;
                        background: #d9eef8;
                      "
                    >
                      <Tag
                        style="margin-top: 4px; margin-right: 15px"
                        :color="zhuanTai.color(item.stateCode)"
                      >
                        {{ zhuanTai.text(item.stateCode, gongXu) }}
                      </Tag>

                      <span class="titleSpan ivu-mr-16 ivu-ml-16">{{ item.machineName }}#</span>
                    </div>
                    <div style="margin-left: 5px; margin-top: 8px">
                      <row>
                        <Col span="12">
                          <div class="text3" :title="`品种：${item.materialName}`"
                            >品种:{{ item.materialName }}</div
                          >
                        </Col>
                        <Col span="12">
                          <div
                            class="text3"
                            :title="`产量：${item.currentShiftLength === null ? '' : parseInt(item.currentShiftLength)}`"
                          >
                            产量:{{
                              item.currentShiftLength === null
                                ? ''
                                : parseInt(item.currentShiftLength)
                            }}m
                          </div>
                        </Col>
                        <Col span="12">
                          <div
                            v-if="['末并', '二并', '预并', '梳棉'].includes(gongXuStr)"
                            class="text3"
                            :title="`速度：${item.speed}m/min`"
                            >速度:{{ item.speed }}m/min
                          </div>
                          <div
                            v-else-if="['织机', '气流纺'].includes(gongXuStr)"
                            class="text3"
                            :title="`速度：${item.speed}r/min`"
                            >速度:{{ item.speed }}r/min
                          </div>
                          <div v-else class="text3" :title="`速度：${item.speed}r/min`"
                            >速度:{{ item.speed }}r/min</div
                          >
                        </Col>
                        <Col span="12">
                          <div class="text3" :title="`运转效率：${item.runEfc}`"
                            >运转效率:{{ item.runEfc }}%</div
                          >
                        </Col>
                      </row>
                    </div>
                    <div v-if="['粗纱', '细纱'].includes(gongXuStr)">
                      <span class="titleSpan ivu-ml-8 ivu-mr-16" style="">进度条:</span>
                      <div
                        style="display: inline-block; width: calc(100% - 75px); margin-top: -2px"
                      >
                        <Progress
                          :percent="item.yarnPercent === null ? 0 : item.yarnPercent"
                          :stroke-width="14"
                          status="active"
                          stroke-color="#81bbd6"
                        >
                          <span v-if="item.yarnPercent == 100">100%</span>
                        </Progress>
                      </div>
                    </div>
                    <div v-if="!['织机', '气流纺'].includes(gongXuStr)">
                      <span class="titleSpan ivu-ml-8 ivu-mr-16" style="width: calc(50% - 25px)"
                        >当前用时:{{
                          formatDuration(item.currentTime, { showSeconds: false })
                        }}</span
                      >
                      <span class="titleSpan ivu-ml-8 ivu-mr-16" style="width: calc(50% - 25px)"
                        >剩余时间:{{
                          formatDuration(item.timeRemaining, { showSeconds: false })
                        }}</span
                      >
                    </div>
                    <Row>
                      <Col span="12">
                        <div>
                          <span class="titleSpan ivu-ml-8">值车人员:</span>
                          <span class="titleSpan">{{ item.machinePersonnelOnDutys }}</span>
                        </div>
                      </Col>
                      <Col span="12">
                        <div v-if="quanXianCode == true">
                          <span class="titleSpan ivu-ml-8">责任人:</span>
                          <span class="titleSpan">{{ item.mroEmployeeName }}</span>
                        </div>
                      </Col>
                      <Col span="12">
                        <div v-if="gongXuStr === '梳棉'" style="height: 30px; line-height: 30px">
                          <span class="titleSpan ivu-ml-8">当班/上班满桶个数:</span>
                          <span class="titleSpan"
                            >{{ item.barrelCntCurrentShift }}/{{ item.barrelCntLastShift }}</span
                          >
                        </div>
                      </Col>
                    </Row>
                  </div>
                </Card>
              </div>
            </Col>
          </Row>
        </div>
      </Card>
      <canShuModelZhiJi ref="canShuModelZhiJiRef"></canShuModelZhiJi>
      <luo-tong-can-shu-model ref="luoTongCanShuModel"></luo-tong-can-shu-model>
      <xi-sha-can-shu-model ref="xiShaCanShuModel" :gong-xu-str="gongXuStr"></xi-sha-can-shu-model>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { zhuanTai, valueZhuaneFloat } from '@/utils/custom/index'
  import { formatDuration } from '@/utils/common/date'
  import canShuModelZhiJi from '@/components/custom/fenZuZhuangTai/canShuModelZhiJi.vue'
  import luoTongCanShuModel from '@/components/custom/fenZuZhuangTai/luoTongCanShuModel.vue'
  import xiShaCanShuModel from '@/components/custom/fenZuZhuangTai/xiShaCanShuModel.vue'

  import {
    getZhuangTaiZongLanAndTongJi_cs,
    getZhuangTaiZongLan_eb,
    getZhuangTaiZongLanAndTongJi_xs,
    getZhuangTaiZongLan_js,
    getZhuangTaiZongLanAndTongJi_mb,
    getZhuangTaiZongLanAndTongJi_sm,
    getZhuangTaiZongLanAndTongJi_yb,
    getZhuangTaiZongLan_tj,
    getZhuangTaiZongLan_qlf,
    getZhuangTaiZongLan_zj,
    getGengJuCaiDanBianMaChaXun
  } from '@/api/shengChanJianShi'
  import { getGongXuAndWuLiaoBiao } from '@/api/gongGongChaXun'

  const props = defineProps({
    gongXu: String,
    daJiXingID: String,
    bianMaCode: String
  })

  const zongLanDict: any = ref({
    currentShiftLength: null,
    machineName: null,
    efcRunMin: null,
    power: null,
    runEfcAvg: null,
    breakJointTimeAvg: null,
    breaksPerKilo: null,
    doffRate: null,
    breakCnt: null,
    breakYarnCnt: null,
    onLine: null,
    offLine: null,
    theoreticalYarnWeight: null
  })
  const quanXianCode = ref()
  const gongXuStr = ref()
  // const isShow = ref(false)
  const collapse = ref(true)
  const pingZhongShow = ref(true)
  const souSuoStr = ref(null)
  const renWusouSuoStr = ref(null)
  const pingZhongID = ref('全部')
  const radioButton = ref('发出的任务(119)')
  const tongZhiState = ref('')
  const grid = ref({
    xl: 7,
    lg: 12,
    md: 12,
    sm: 24,
    xs: 24
  })
  const grid2 = ref({
    xl: 10,
    lg: 12,
    md: 12,
    sm: 24,
    xs: 24
  })
  const grid3 = ref({
    xxl: 6,
    xl: 8,
    lg: 8,
    md: 12,
    sm: 24,
    xs: 24
  })
  // const hostCraftParas = ref([])
  // const hostFaultParas = ref([])
  // const hostProduceParas = ref([])
  // const setBaseParas = ref([])
  // const setCraftParas = ref([])
  // const imgUrl = ref('')
  const spinJiTaiShow = ref(true)
  // const loading = ref(false)
  // const jiXingList = ref([])
  // const jiXingId = ref('')
  const jiTailist: any = ref([])
  const zaiFangList: any = ref([])
  const tableData = ref([])
  // const attrbuteObj = ref({})
  const pingZhonDict = ref({})
  // const teamSet = ref(null)

  watch(
    props.gongXu,
    (newValue: any) => {
      gongXuStr.value = newValue
    },
    { immediate: true }
  )

  watch(
    props.bianMaCode,
    (val: any) => {
      console.log(val)
      getGengJuCaiDanBianMaChaXunList()
    },
    { immediate: true }
  )

  onMounted(() => {
    getShuJuTongJiAndWuLiao()
    getJiTaIZhuangTaiZongLanList()
  })

  // onUnmounted(() => {
  //   clearInterval(clearTimeSet.value)
  // })

  const getGengJuCaiDanBianMaChaXunList = () => {
    getGengJuCaiDanBianMaChaXun('511000').then((res) => {
      quanXianCode.value = res
    })
  }

  const formatFunc = (value) => {
    if (value === null) return null
    return parseFloat(value.toFixed(2))
  }
  // 获取机台信息list
  const getJiTaIZhuangTaiZongLanList = () => {
    if (gongXuStr.value == '细纱') {
      getZhuangTaiZongLanAndTongJi_xs()
        .then((res: any) => {
          spinJiTaiShow.value = false
          zongLanDict.value = {
            currentShiftLength: formatFunc(res.currentShiftLength),
            // res.currentShiftLength == null
            //   ? null
            //   : Math.round(res.currentShiftLength * 100) / 100,
            danWei: '米',
            machineName: res.machineName,
            efcRunMin: res.efcRunMin == null ? null : Math.round(res.efcRunMin * 100) / 100,
            power: res.power == null ? null : Math.round(res.power),
            runEfcAvg: res.runEfcAvg == null ? null : Math.round(res.runEfcAvg * 100) / 100,
            breakJointTimeAvg:
              res.breakJointTimeAvg == null
                ? null
                : Math.round((res.breakJointTimeAvg / 60) * 100) / 100,
            breaksPerKilo: res.breaksPerKilo,
            doffRate: res.doffRate == null ? null : Math.round(res.doffRate * 10) / 10,
            machineOnlineXs: res.machineOnlineXs
          }

          tableData.value = res.machineOnlineXs
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '粗纱') {
      getZhuangTaiZongLanAndTongJi_cs()
        .then((res: any) => {
          spinJiTaiShow.value = false
          zongLanDict.value = {
            currentShiftLength:
              res.currentShiftLength == null
                ? null
                : Math.round(res.currentShiftLength * 100) / 100,
            theoreticalYarnWeight:
              res.theoreticalYarnWeight == null
                ? null
                : Math.round(res.theoreticalYarnWeight * 100) / 100,
            danWei: 'kg',
            breakCnt: res.breakCnt,
            breakYarnCnt: res.breakYarnCnt,
            power: res.power == null ? null : Math.round(res.power),
            machineOnlineCs: res.machineOnlineCs
          }
          tableData.value = res.machineOnlineCs
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '二并') {
      getZhuangTaiZongLan_eb()
        .then((res: any) => {
          spinJiTaiShow.value = false
          tableData.value = res
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '精梳') {
      getZhuangTaiZongLan_js()
        .then((res: any) => {
          spinJiTaiShow.value = false
          tableData.value = res
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '末并') {
      getZhuangTaiZongLanAndTongJi_mb()
        .then((res: any) => {
          spinJiTaiShow.value = false
          zongLanDict.value = {
            onLine: res.onLine,
            offLine: res.offLine,
            currentShiftLength:
              res.currentShiftLength == null
                ? null
                : Math.round(res.currentShiftLength * 100) / 100,
            theoreticalYarnWeight:
              res.theoreticalYarnWeight == null
                ? null
                : Math.round(res.theoreticalYarnWeight * 100) / 100,
            danWei: 'kg',
            power: res.power == null ? null : Math.round(res.power),
            machineOnlineMb: res.machineOnlineMb
          }

          tableData.value = res.machineOnlineMb
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '条卷') {
      getZhuangTaiZongLan_tj()
        .then((res: any) => {
          spinJiTaiShow.value = false
          tableData.value = res
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '预并') {
      getZhuangTaiZongLanAndTongJi_yb()
        .then((res: any) => {
          spinJiTaiShow.value = false
          zongLanDict.value = {
            onLine: res.onLine,
            offLine: res.offLine,
            currentShiftLength:
              res.currentShiftLength == null
                ? null
                : Math.round(res.currentShiftLength * 100) / 100,
            theoreticalYarnWeight:
              res.theoreticalYarnWeight == null
                ? null
                : Math.round(res.theoreticalYarnWeight * 100) / 100,
            danWei: 'kg',
            power: res.power == null ? null : Math.round(res.power),
            machineOnlineYb: res.machineOnlineYb
          }
          tableData.value = res.machineOnlineYb
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '梳棉') {
      getZhuangTaiZongLanAndTongJi_sm()
        .then((res: any) => {
          spinJiTaiShow.value = false
          zongLanDict.value = {
            onLine: res.onLine,
            offLine: res.offLine,
            currentShiftLength:
              res.currentShiftLength == null
                ? null
                : Math.round(res.currentShiftLength * 100) / 100,
            theoreticalYarnWeight:
              res.theoreticalYarnWeight == null
                ? null
                : Math.round(res.theoreticalYarnWeight * 100) / 100,
            danWei: 'kg',
            power: res.power == null ? null : Math.round(res.power),
            machineOnlineSm: res.machineOnlineSm
          }

          tableData.value = res.machineOnlineSm
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '织机') {
      getZhuangTaiZongLan_zj()
        .then((res: any) => {
          spinJiTaiShow.value = false
          tableData.value = res.map((value) => {
            return valueZhuaneFloat(value)
          })
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    } else if (gongXuStr.value == '气流纺') {
      getZhuangTaiZongLan_qlf()
        .then((res: any) => {
          spinJiTaiShow.value = false
          tableData.value = res.map((value) => {
            return valueZhuaneFloat(value)
          })
          jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
          if (pingZhongShow.value === true) {
            taiShuInput()
          }
        })
        .catch(() => {
          spinJiTaiShow.value = false
        })
    }
  }

  const pingZhonList = ref()
  const getShuJuTongJiAndWuLiao = () => {
    getGongXuAndWuLiaoBiao(props.daJiXingID).then((res) => {
      pingZhonList.value = res
    })
  }
  // 最低机台输入
  const taiShuInput = () => {
    jiTailist.value = []
    if (souSuoStr.value === '' || souSuoStr.value === null) {
      nextTick(() => {
        jiTailist.value = tableData.value
      })
    } else {
      jiTailist.value = tableData.value
        .sort(function (a, b) {
          return a.runEfc - b.runEfc
        })
        .slice(0, souSuoStr.value)
    }
  }
  // card点击事件
  const canShuModelZhiJiRef = ref()
  const cardClick = (item) => {
    if (item.craftNodeName === '织机') {
      canShuModelZhiJiRef.value.show(item)
    } else {
      canShuModelZhiJiRef.value.show(item)
    }
  }
  // 品种单选框选择
  const radioGroupClck = (item) => {
    pingZhonDict.value = item
    jiTailist.value = []
    nextTick(() => {
      if (item === '全部') {
        jiTailist.value = JSON.parse(JSON.stringify(tableData.value))
      } else {
        jiTailist.value = JSON.parse(JSON.stringify(tableData.value)).filter((value) => {
          return value.materialName === item
        })
      }
    })
  }
</script>
<style lang="scss">
  .fenZuZhuangTaiDiv {
    .blueDiv {
      width: 10px;
      height: 30px;
      background: #1e93ff;
    }

    .jiTaiDiv {
      .ivu-card-bordered {
        border: 2px solid #d5e6f8 !important;
        box-sizing: border-box !important;
        box-shadow: 3px 5px 5px #d5e6f8 !important;
      }
    }

    .ivu-radio-group {
      width: 100% !important;
    }

    .text1 {
      display: inline-block;
      cursor: default;
      width: calc(100% - 20px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .text1:hover {
    }

    .tagZhuangTaiDiv {
      .ivu-tag-text {
        color: #333333 !important;
        font-weight: bold;
      }
    }

    .text2 {
      display: inline-block;
      cursor: default;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .text3 {
      width: 100%;
      font-size: 14px;
      line-height: 30px;
      font-weight: 600;
      padding-left: 4px;
      text-align: left;
      cursor: default;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .text2:hover {
    }

    .cardPading {
      .ivu-card-body {
        padding: 16px 0px;
      }
    }

    .shijianZhou {
      font-size: 14px;
      font-weight: 600;
      color: #1e93ff;
    }

    .transition-box {
      margin-top: 32px;
      width: 100%;
      border-radius: 4px;
      background-color: #409eff;
      text-align: center;
      color: #fff;
      padding: 24px 0;
    }

    .fenZuZhuangTai6 {
      opacity: 0.3; /* 不透明度 */
      background-color: red;
    }

    .titleSpan {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
    }

    .itemDiv {
      margin-bottom: 8px;
      display: flex;
      flex-direction: row;
    }

    .breath_light {
      opacity: 0.1; /* 不透明度 */
      overflow: hidden; /* 溢出隐藏 */ /* 背景色 */

      /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
      animation-name: breath; /* 动画名称 */
      animation-duration: 2s; /* 动画时长3秒 */
      animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
      animation-iteration-count: infinite; /* 播放次数：无限 */

      /* Safari and Chrome */
      -webkit-animation-name: breath; /* 动画名称 */
      -webkit-animation-duration: 2s; /* 动画时长3秒 */
      -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
      -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
    }

    @keyframes breath {
      from {
        opacity: 1;
      }
      ///* 动画开始时的不透明度 */
      //50% {
      //  opacity: 1;
      //}
      to {
        opacity: 0.1;
      }
      /* 动画结束时的不透明度 */
    }

    @-webkit-keyframes breath {
      from {
        opacity: 1;
      }
      ///* 动画开始时的不透明度 */
      //50% {
      //  opacity: 1;
      //}
      /* 动画50% 时的不透明度 */
      to {
        opacity: 0.1;
      }
      /* 动画结束时的不透明度 */
    }
  }
</style>
